<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站后台管理系统</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css"/>
<![endif]-->
<link rel="stylesheet" type="text/css"  href="../../../../public/layui/css/layui.css">
<link href="../../../../public/admin/css/style_v2.0.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/style_v2.0.css" />
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/js/g2.js"></script>
</head>
<body>
    <div class="layui-box1" style="background-color:#FFFFFF;">
    <div class="layui-row layui-col-space10" >
        <div class="layui-col-xs3">
          <div class="grid-demo grid-demo-bg1">
              <div class="grid_content" id="grid_ico01">
                  <span><a href="{:U('Web/domain')}">{$domain_all}</a><i>个</i></span>
                  <p>共有网站</p>
              </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="grid-demo  grid-demo-bg2">
             <div class="grid_content" id="grid_ico02">
                  <span><a href="{:U('Host/vps')}">{$vps_all}</a><i>台</i></span>
                  <p>vps数量</p>
              </div>
          
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="grid-demo grid-demo-bg3">
              <div class="grid_content" id="grid_ico03">
                  <span><a href="{:U('Host/host')}">{$host_all}</a><i>个</i></span>
                  <p>虚拟主机</p>
              </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="grid-demo grid-demo-bg4">
            <div class="grid_content" id="grid_ico04">
                  <span><a href="{:U('Web/search',array('sotype' => 1))}">{$domain_jixu}</a><i>个</i></span>
                  <p>急需续费</p>
            </div>
          </div>
        </div>
      </div>
</div><!--栅格图标-->
<div class="c"></div>
<div class="tubbiao">
      <div class="tongji01">
          <div class="tongji_box">
              <div class="tongji_title" id="ico_zhu">12个月新增网站统计</div>
              <div id="web_all"></div>
          </div>
      </div><!--12个月网站统计图-->
      <div class="tongji01_right">
          <div class="tongji02">
                <div class="tongji_title" id="ico_group">各分组网站数量</div>
                <div id="group_num"></div>
          </div><!--各分组网站数量-->
      </div><!--右侧-->
      <div class="c"></div>
</div><!--图表-->
<div class="grid_info">
    <div class="grid3_left">
        <div class="web_month">
            <div class="grid_box10">
                 <div class="tongji_title" id="ico_zuixin">最新新增网站</div>
                 <ul class="web_mlist">
                   <volist name="web_month" id="mo">
                   <li><span class="layui-btn layui-btn-mini"><a href="{:U('Web/domain',array('did' => $mo['did']))}">查看</a></span><i class="layui-btn  layui-btn-warm layui-btn-mini">{$mo.inputtime|date='m-d',###}</i>&nbsp;<a href="{:U('Web/domain',array('did' => $mo['did']))}">{$mo.webname}</a></li>
                   </volist>
                 </ul>
            </div>
        </div><!--本月新增网站-->
        
        <div class="web_month" style="float:right;">
            <div class="grid_box10">
                 <div class="tongji_title" id="ico_jixu">急需续费网站</div>
                 <ul class="web_mlist">
                   <volist name="domain_jixulist" id="xu">
                    <li><span class="layui-btn layui-btn-mini"><a href="{:U('Web/domain',array('did' => $xu['did']))}">续费</a></span>
                    <span class="layui-btn layui-btn-danger layui-btn-mini">到期：{$xu.inputtime|date='m-d',###}</span>&nbsp;<a href="{:U('Web/domain',array('did' => $xu['did']))}">{$xu.webname}</a></li>
                   </volist>
                 </ul>
            </div>
        </div><!--本月新增网站-->
        
    </div><!--左侧-->
    <div class="grid3_right">
         <div class="copyright">
         <blockquote class="layui-elem-quote" style="padding-top:5px; padding-bottom:5px;">系统信息</blockquote>
         <table class="layui-table">
             <tr>
                 <td>系统版本：</td>
                 <td>Weber客户管理系统1.0</td>
             </tr>
             <tr>
                 <td>程序版本：</td>
                 <td>TP3.2.3 + Layui v2.0.1</td>
             </tr>
             <tr>
                 <td>开发作者：</td>
                 <td>石头建站<a target="_blank" href="tencent://message/?uin=2863868475&&Site=pweb123.com&&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:2863868475:47"></td>
             </tr>
             <tr>
                 <td>官方网站：</td>
                 <td><a href="http://www.sootou.com" target="_parent">郑州石头网络工作室</a></td>
             </tr>
             <tr>
                 <td>技术支持：</td>
                 <td><a href="http://www.pweb123.com" target="_parent">建站之家</a></td>
             </tr>
         </table>
         
         </div>
    </div><!--左侧-->
</div><!--第三部分-->
    <script>
      var data = {$tongji}; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
      // Step 1: 创建 Chart 对象
      var chart = new G2.Chart({
        id: 'web_all', // 指定图表容器 ID
        forceFit: true,
		//width : 800, // 指定图表宽度
        height : 360 // 指定图表高度
      });
      // Step 2: 载入数据源,定义列信息
      chart.source(data, {
        year: {
          alias: '' // 列定义，定义该属性显示的别名
        },
        num: {
          alias: '网站新增个数'
        }
      });
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
       chart.interval().position('year*num').color('year')
     // chart.line().position('year*num').size(2);
      chart.render();
	  
	  /*绘制分组图*/
	 var data2 ={$group_num};
     var Stat2 = G2.Stat;
     var Frame2 = G2.Frame;
     var frame2 = new Frame2(data2);
      frame2 = Frame2.sort(frame2, 'webnum'); // 将数据按webnum 进行排序，由大到小
      var chart2 = new G2.Chart({
        id : 'group_num',
        forceFit: true,
        height: 360,
        plotCfg: {
          margin: [20, 60, 20, 120]
        }
      });
      chart2.source(frame2);
      chart2.axis('groupname',{
        title: '网站数量'
      });
      chart2.coord('rect').transpose();
      chart2.interval().position('groupname*webnum');
      chart2.render();
    </script>
    <!--<div id="test" style="width:100%; height:200px;"></div>-->
    <script>
//	   $(function(){
//	       $.ajax({
//		       url:'http://www.sootou.com/api.php?op=demo&catid=28&num=10',
//			   dataType:'jsonp',
//			   jsonp:"jsoncallback",
//			   type:'get',
//			   success:function(data){
//				   var data=eval(data);
//				   //console.log(data[0].title);
//				   $.each(data, function(index, p){
//				       html  = "<li>";
//					   html += "<a href='"+ p.url +"' target='_blank'>"+ p.title +"</a>"; 
//					   html += "</li>";
//					   $("#test").append(html);
//				   })
//				 },
//			   error : function() {  
//                   console.log('fail');  
//                }  
//		   });
//	   });
	</script>
  </body>
</html>